<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->

<!--
`paper-input` is a single- or multi-line text field where user can enter input.
It can optionally have a label.

Example:

    <paper-input label="Your Name"></paper-input>
    <paper-input multiline label="Enter multiple lines here"></paper-input>

Theming
--------

Set `CoreStyle.g.paperInput.focusedColor` and `CoreStyle.g.paperInput.invalidColor` to theme
the focused and invalid states.

@group Paper Elements
@element paper-input
@extends core-input
@homepage github.io
-->
<link href="../polymer/polymer.html" rel="import">
<link href="../core-icon/core-icon.html" rel="import">
<link href="../core-icons/core-icons.html" rel="import">
<link href="../core-input/core-input.html" rel="import">
<link href="../core-style/core-style.html" rel="import">

<core-style id="paper-input">

:host([focused]) .floated-label {
  color: {{g.paperInput.focusedColor}};
}

.focused-underline,
.cursor {
  background-color: {{g.paperInput.focusedColor}};
}


:host(.invalid[focused]) .floated-label,
:host([focused]) .error-text,
:host([focused]) .error-icon {
  color: {{g.paperInput.invalidColor}};
}

:host(.invalid) .focused-underline,
:host(.invalid) .cursor {
  background-color: {{g.paperInput.invalidColor}};
}

</core-style>

<polymer-element name="paper-input" extends="core-input" layout vertical attributes="label floatingLabel maxRows error" on-transitionEnd="{{transitionEndAction}}" on-webkitTransitionEnd="{{transitionEndAction}}">

  <template>

    <!--
    Input tests:

    - set value to integer 0
    - various html5 input types
    - sizing:
      - single-line: size with CSS
      - single-line: can fit to container
      - multi-line: size with CSS
      - multi-line: size with rows
      - multi-line: can fit to container
      - multi-line: grows with typing
      - multi-line: max rows
      - multi-line: max rows, scrolls after
    -->

    <link href="paper-input.css" rel="stylesheet">
    <core-style ref="paper-input"></core-style>

    <div class="floated-label" aria-hidden="true" hidden?="{{!floatingLabel}}" invisible?="{{!inputValue && !(type === 'number' && !validity.valid) || labelAnimated}}">
      <!-- needed for floating label animation measurement -->
      <span id="floatedLabelText" class="label-text">{{label}}</span>
    </div>

    <!-- <div class="input-body" flex auto relative on-down="{{downAction}}" on-up="{{upAction}}"> -->
    <div class="input-body" flex auto relative>

      <!-- the mirror sizes the input/textarea so it grows with typing -->
      <div id="mirror" class="mirror-text" invisible aria-hidden="true"></div>

      <div class="label" fit aria-hidden="true">
        <!-- needed for floating label animation measurement -->
        <span id="labelText" class="label-text" invisible?="{{inputValue || !inputValue && type === 'number' && !validity.valid}}" animated?=
        "{{labelAnimated}}">{{label}}</span>
      </div>

      <div class="cursor" invisible?="{{!cursorAnimated}}" animated?="{{cursorAnimated}}"></div>

      <!-- size the input/textarea with a div, because the textarea has intrinsic size in ff -->
      <div class="input-container" on-down="{{downAction}}" on-up="{{upAction}}">
        <shadow></shadow>
      </div>

    </div>

    <div id="underline" class="underline" relative>
      <div class="unfocused-underline" fit invisible?="{{disabled}}"></div>
      <div id="focusedUnderline" class="focused-underline" fit invisible?="{{!focused}}" animated?="{{underlineAnimated}}"></div>
    </div>

    <div layout horizontal center hidden?="{{!invalid}}">
      <div class="error-text" flex auto role="alert" aria-hidden="{{!invalid}}">{{error || validationMessage}}</div>
      <core-icon class="error-icon" icon="warning"></core-icon>
    </div>

  </template>

  <script src="paper-input.js"></script>

</polymer-element>
